<template>
  <view class="container">
    <!-- 新增背景图片 -->
    <image 
      class="background-image" 
      src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/adminBackground.png" 
      mode="aspectFill"
    ></image>

    <view class="login-box">
      <text class="title">管理员登录</text>
      
      <view class="form-item">
        <text class="label">账号</text>
        <input 
          class="input" 
          v-model="username" 
          placeholder="请输入管理员账号"
          placeholder-class="placeholder"
        />
      </view>

      <view class="form-item">
        <text class="label">密码</text>
        <input 
          class="input" 
          v-model="password" 
          password
          placeholder="请输入密码"
          placeholder-class="placeholder"
          @confirm="handleLogin"
        />
      </view>

      <button 
        class="login-btn" 
        :loading="loading"
        @tap="handleLogin"
      >
        登录
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      loading: false
    }
  },
  methods: {
    handleLogin() {
      if (!this.username.trim()) {
        uni.showToast({
          title: '请输入账号',
          icon: 'none'
        })
        return
      }

      if (!this.password.trim()) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return
      }

      this.loading = true
      
      // 这里模拟登录请求，实际应替换为真实接口
      setTimeout(() => {
        this.loading = false
        if (this.username === 'admin' && this.password === 'admin123') {
          uni.showToast({
            title: '登录成功',
            icon: 'success'
          })
          uni.navigateTo({
            url: '/pages/admin/admin'
          })
        } else {
          uni.showToast({
            title: '账号或密码错误',
            icon: 'none'
          })
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
/* 新增背景样式 */
.container {
  position: relative; /* 新增 */
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f2f5;
  overflow: hidden; /* 新增 */
}

.background-image {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* 原有样式保持不变 */
.login-box {
  width: 85%;
  padding: 40rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  position: relative; /* 新增 */
  z-index: 1; /* 新增 */
}

.title {
  display: block;
  font-size: 40rpx;
  color: #333;
  text-align: center;
  margin-bottom: 60rpx;
  font-weight: bold;
}

.form-item {
  margin-bottom: 40rpx;
}

.label {
  display: block;
  font-size: 30rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.input {
  height: 80rpx;
  padding: 0 20rpx;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.placeholder {
  color: #ccc;
}

.login-btn {
  margin-top: 60rpx;
  background: #007AFF;
  color: #fff;
  border-radius: 8rpx;
  font-size: 32rpx;
  height: 88rpx;
  line-height: 88rpx;
  
  &[disabled] {
    background: #a0cfff;
  }
}
</style>